<!--  -->
<template>
  <div class="pdtable-item-form">
    <div class="form-left">
      <el-form-item v-for="(item, index) in pdtableAttr" :key="index"
        :label="item.title" class="width-limit" :class="item.type===5 ? 'requireStar': ''">
        <el-input v-model="item.value" size="medium" maxlength="500"></el-input>
      </el-form-item>
      <el-form-item label="添加图片">
        <el-button type="primary" size="small" @click.stop="chooseImage">点击上传图片</el-button>
        <PdtableImageList :imageList="this.pdtable.imageList" :imageRepertoryConfig="this.pdtable.imageRepertoryConfig" :resetImageList="resetImageList" />
      </el-form-item>
      <el-form-item label="添加文件">
        <el-button type="primary" size="small" @click.stop="chooseFile">点击上传文件</el-button>
        <span class="spn">仅支持txt,pdf,xla,xls,xlsx,xlt,xlw,zip,rar,doc,docx格式</span>
        <div v-if="pdtable.file && pdtable.file.id">
          <div class="dffr">
            <div class="file-image-icon">
              <img :src="require('@/assets/images/icon_suffix/'+pdtable.file.suffix+'.png')" alt="file-icon"
                style="max-width:40px;max-height:40px;">
            </div>
            <div class="file-name black">
              {{pdtable.file.originalFilename}}
            </div>
            <div class="opt">
              <el-button type="text" @click.stop="deleteFile()"><i class="el-icon-delete"></i></el-button>
            </div>
          </div>
        </div>
      </el-form-item>
      <ItemCustomizeURL :system="system" :customizeUrl="pdtable.customLink" :pageid="pdtable.id" :labelWidth="'180px'" ref="customLink"/>
      <el-form-item label="产品分类" v-if="system && system.systemType && system.systemType.id === 8" class="width-limit">
        <el-select size="medium" v-model="pdtable.categoryIds" placeholder="未定义" :multiple="true" style="width:100%;">
          <template v-for="item in categories[0]">
            <el-option :key="item.id" :label="item.name" :value="item.id"></el-option>
            <template v-for="ite in categories[item.id]">
              <el-option style="padding-left:36px;" :key="ite.id" :label="ite.name" :value="ite.id"></el-option>
              <template v-for="it in categories[ite.id]">
                <el-option style="padding-left: 54px;" :key="it.id" :label="it.name" :value="it.id"></el-option>
              </template>
            </template>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="发布时间" class="width-limit">
        <el-date-picker v-model="pdtable.releasedAt" v-datetime-format type="datetime" placeholder="请选择发布时间" size="medium"
          style="width:100%;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="详细内容" style="width:calc(100% - 3px);">
        <Ue :defaultValue="pdtable.content ? pdtable.content: ''" :contentChange="contentChange" :id="'content'" ref="content"></Ue>
      </el-form-item>
    </div>

    <!-- 选择资源文件 -->
    <ChooseRepertory ref="chooseRepertory" />
  </div>
</template>

<script>
import Ue from '@/components/common/ueditor/Ue.vue'
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
import PdtableImageList from '@/components/main/user/system/pdtable/item/form/PdtableImageList.vue'
import ItemCustomizeURL from '@/components/main/user/system/common/ItemCustomizeURL.vue'
import * as functions from '@/core/functions.js'
export default {
  props: {
    categories: {
      type: Object
    },
    system: {
      type: Object
    },
    pdtable: {
      type: Object
    },
    changePdtable: {
      type: Function
    },
    resetImageList: {
      type: Function
    },
    contentChange: {
      type: Function
    },
    isSetUecontent: {
      type: Boolean
    }
  },
  created () {
    if (this.isSetUecontent) {
      this.setContent()
    }
  },
  data () {
    return {
      title: '',
      // 错误信息
      errorMessage: ''
    }
  },
  watch: {
    pdtable: {
      handler (newValue, oldValue) {
      },
      deep: true
    },
    isSetUecontent: {
      handler (newVal) {
        if (newVal) {
          this.setContent()
        }
      }
    }
  },
  computed: {
    pdtableAttr () {
      return this.pdtable.titleItem
    }
  },
  methods: {
    // 点击选择图片
    chooseImage () {
      if (this.pdtable.imageList.length > 0) {
        this.$message.error('只允许选择一张图片')
        return
      }
      this.$refs['chooseRepertory'].show({ title: '选择图片', where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          this.pdtable.imageList = repertoryList.map(item => {
            let repertoryImageSrc = { hostId: this.$store.state.host.id, repertoryId: item.id, suffix: item.suffix, type: item.type, link: item.link }
            return {
              id: item.id,
              src: functions.getRepertoryImageSrc(repertoryImageSrc),
              title: item.originalFilename,
              alt: item.originalFilename
            }
          })
          this.pdtable.imageRepertoryConfig = {
            title: this.pdtable.imageList[0].originalFilename,
            alt: this.pdtable.imageList[0].originalFilename
          }
          this.pdtable.imageRepertoryId = this.pdtable.imageList[0].id
        }
      })
    },
    // 选择下载资源文件
    chooseFile () {
      this.$refs['chooseRepertory'].show({ title: '选择下载系统资源文件', where: { type: [1] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          let repertory = repertoryList[0]
          let file = {
            id: repertory.id,
            originalFilename: repertory.originalFilename,
            suffix: repertory.suffix
          }
          let pdtable = JSON.parse(JSON.stringify(this.pdtable))
          pdtable.file = file
          pdtable.fileRepertoryId = file.id
          this.changePdtable(pdtable)
        }
      })
    },
    // 显示错误以及 focus
    showErrorMessage (errorMessage) {
      this.errorMessage = errorMessage
    },
    // 删除 file
    deleteFile () {
      let pdtable = JSON.parse(JSON.stringify(this.pdtable))
      pdtable.file = {}
      pdtable.fileRepertoryId = null
      this.changePdtable(pdtable)
    },
    getContent () {
      return this.$refs['content'].getUEContent()
    },
    setContent () {
      this.$nextTick(() => {
        this.$refs['content'].setUEContent(this.pdtable.content ? this.pdtable.content : '')
      })
    },
    getCustomLink () {
      let itemCustomLinkInfo = this.$refs['customLink'].customUrl()
      return itemCustomLinkInfo
    }
  },
  components: {
    Ue,
    ChooseRepertory,
    PdtableImageList,
    ItemCustomizeURL
  }
}

</script>

<style scoped lang="scss">
.pdtable-item-form .opt {
  margin-left: 28px;
  .el-icon-delete{
    font-size: 18px;
    &:hover{
      color:#0480FB;
    }
  }
}
.ipdtable-item-form /deep/ .el-form-item{
  margin-bottom: 15px;
}
.spn{
  margin-left: 15px;
  color: #666;
  font-size: 12px;
}
.dffr{
  margin-top: 5px;
  line-height: 1.3;
  }
.file-name{
  margin-left: 10px;
  margin-top:8px;
  line-height: 2;
}
.width-limit {
  min-width: 250px;
  max-width: 980px;
}
.requireStar /deep/ .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>
